<img src="./assets/login_center_bg.png" class="center-bg-image">
<div class="form-container">
  <div class="icon-title">
    <svg class="icon" viewBox="0 0 1024 1024" id="icon-login-mall">
      <path
        d="M825.6 554.666667c-64 0-121.6-38.4-155.733333-89.6C633.6 516.266667 576 554.666667 512 554.666667s-121.6-38.4-155.733333-89.6C320 516.266667 264.533333 554.666667 198.4 554.666667 89.6 554.666667 0 465.066667 0 356.266667v-8.533334L151.466667 0h721.066666L1024 345.6v8.533333c0 110.933333-89.6 200.533333-198.4 200.533334z m-200.533333-219.733334h85.333333c0 61.866667 51.2 134.4 113.066667 134.4 59.733333 0 108.8-46.933333 113.066666-104.533333L817.066667 85.333333H206.933333L85.333333 364.8c4.266667 57.6 53.333333 104.533333 113.066667 104.533333 64 0 113.066667-74.666667 113.066667-134.4h85.333333c0 61.866667 51.2 134.4 113.066667 134.4 66.133333 0 115.2-74.666667 115.2-134.4zM810.666667 1021.866667H213.333333c-83.2 0-149.333333-64-149.333333-142.933334V595.2h85.333333v283.733333c0 32 27.733333 57.6 64 57.6h597.333334c34.133333 0 64-25.6 64-57.6V595.2h85.333333v283.733333c0 78.933333-66.133333 142.933333-149.333333 142.933334z"
        p-id="2044">
      </path>
    </svg>
  </div>
  <h2 class="loggin-title">用户注册</h2>
  <form nz-form [formGroup]="userInfoForm" (ngSubmit)="regist()">
    <nz-form-item>
      <nz-form-control nzErrorTip="请输入用户名">
        <nz-input-group [nzPrefix]="userNamePrefix" nzSize="large">
          <input nz-input placeholder="请输入用户名" formControlName="userName">
        </nz-input-group>
        <ng-template #userNamePrefix>
          <i nz-icon nzType="user" class="input-icon"></i>
        </ng-template>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-control nzErrorTip="请输入密码">
        <nz-input-group [nzPrefix]="passwordPrefix" [nzSuffix]="passwordSuffix" nzSize="large">
          <input nz-input placeholder="请输入密码" [type]="passwordVisible ? 'text' : 'password'" formControlName="password">
        </nz-input-group>
        <ng-template #passwordPrefix>
          <i nz-icon nzType="lock" class="input-icon"></i>
        </ng-template>
        <ng-template #passwordSuffix>
          <i nz-icon class="input-icon" [nzType]="passwordVisible ? 'eye-invisible' : 'eye'"
            (click)="passwordVisible = !passwordVisible"></i>
        </ng-template>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item class="last-line">
      <button nz-button nzSize="large" nzType="primary">注册</button>
      <button nz-button nzSize="large" nzType="primary" (click)="returnToLogin($event)">返回</button>
    </nz-form-item>
  </form>
</div>
